<template>
  <div>
    <Box>
      <div slot="box">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="嫌疑人">
            <a-descriptions title="" :column="3">
              <a-descriptions-item label="证件代码">
                <!--                {{party.documentType}}-->
                {{ filterMultiDictText('document_type',party.documentType) }}
              </a-descriptions-item>
              <a-descriptions-item label="作案人数">
                {{ party.perpetratorsNumber }}
              </a-descriptions-item>
              <a-descriptions-item label="抓捕人数">
                {{ party.arrestsNumber }}
              </a-descriptions-item>
              <a-descriptions-item label="证件号码">
                {{ party.identificationNumber }}
              </a-descriptions-item>
              <a-descriptions-item label="在逃人数" :span="2">
                {{ party.fugitivesNumber }}
              </a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
          <a-tab-pane key="2" tab="侦破情况" force-render>
            <div style="width: 100%; display: flex;justify-content: flex-end; margin-bottom: 5px">
              <a-button @click="huajie">添加侦破情况</a-button>
            </div>
            <CustomTable
              ref="table"
              :showAlert="false"
              :columns="columns"
              :dataSource="resolution"
              :showSelection="false"
              :showPagination="true"
              rowKey="id"
              :loading="loading"
              @change="onTableChange"
            >
              <template slot="solveCase" slot-scope="text, record">
                <div>{{ text == '1' ? '是':'否' }}</div>
              </template>
              <template slot="state" slot-scope="text, record">
                <a href="javascript:;" @click="daleterList(record)">删除</a>&emsp;
                <a href="javascript:;" @click="updataList(record)">编辑</a>
              </template>
            </CustomTable>
          </a-tab-pane>
        </a-tabs>
      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <div>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >

            <a-form-model-item ref="text" label="案件侦破情况" prop="situation">
              <a-input v-model="form.situation" type="textarea" placeholder="请输入"/>
            </a-form-model-item>
            <a-form-model-item label="是否破案" prop="solveCase">
              <a-switch v-model="form.solveCase" default-checked @change="onChange5">
                <a-icon slot="checkedChildren" type="check" />
                <a-icon slot="unCheckedChildren" type="close" />
              </a-switch>
            </a-form-model-item>

          </a-form-model>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@views/xlgc/Box'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { getDictItemsFromCache } from '@api/api'
import { deleteZP, updataZP, updateSituation } from '@api/xlgc/lawCase'
export default {
  name: 'ListXi',
  components: { Box, CustomTable },
  props: {
    id: Number,
    party: Object,
    resolution: Array
  },
  data() {
    return {

      labelCol: { span: 6 },
      wrapperCol: { span: 10 },
      other: '',
      form: {
        eventId: '',
        situation: '',
        solveCase: 0
      },
      rules: {
        solveCase: [{ required: true, message: '请选择', trigger: 'blur' }],
        situation: [
          { required: true, message: '请输入案件侦破情况', trigger: 'blur' },
          { min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ]
      },
      visible: false,
      Midata: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          // width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        // {
        //   title: '案件编号',
        //   dataIndex: 'caseCode',
        //   scopedSlots: { customRender: 'caseCode' }
        // },
        {
          title: '案件侦破情况',
          dataIndex: 'situation',
          scopedSlots: { customRender: 'situation' }
        },
        {
          title: '是否破案',
          dataIndex: 'solveCase',
          scopedSlots: { customRender: 'solveCase' }
        },
        {
          title: '提交人',
          dataIndex: 'createBy',
          scopedSlots: { customRender: 'createBy' }
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '操作',
          width: 90,
          align: 'center',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        }
      ],
      pageData: {},
      updateSituationData: true
    }
  },
  mounted() {
    this.form.eventId = this.id
  },
  methods: {
    updataList(val) {
      this.updateSituationData = false
      console.log(val)
      this.visible = true
      this.form.situation = val.situation
      this.form.solveCase = val.solveCase
      this.form.id = val.id
      console.log(this.form)
    },
    daleterList(val) {
      console.log(val)
      deleteZP(val.id).then(response => {
        if (response.success) {
          this.$message.success(response.message, 2)
          this.$emit('update', true)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    handleOk() {
      if (this.updateSituationData) {
        this.form.solveCase = Number(this.form.solveCase)
        console.log(this.form)
        updataZP(this.form).then(response => {
          if (response.success) {
            this.$message.success(response.message, 2)
            console.log(response.message)
            this.visible = false
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        updateSituation(this.form).then(response => {
          if (response.success) {
            this.visible = false
            this.$message.success(response.message, 2)
            this.$emit('update', true)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    onChange5(checked) {
      checked ? this.solveCase = 1 : this.solveCase = 0
    },
    huajie() {
      this.visible = true
    },
    callback(key) {
      console.log(key)
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },

    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>

</style>
